<template>
  <div class="chart-box">
    <div class="nav-top" :style="{width:navWidth+ 'px',left:left+'px',top:top+'px'}">
      <div class="nav-top-container">
        <h2 class="nav-top-title">定点医院医疗费用控制监测分析</h2>
        <div class="nav-top-item-box">
          <span class="prev-btn el-icon-arrow-left" @click="goToPrev"></span>
          <span class="next-btn el-icon-arrow-right" @click="goToNext"></span>
          <p class="nav-top-item-container">
            <a class="nav-top-item" :class="classNum==0?'nav-top-item-active':''" @click="goScroll(0)">医疗费用增长</a>
            <a class="nav-top-item" :class="classNum==1?'nav-top-item-active':''" @click="goScroll(1)">次/人均费用增长</a>
            <a class="nav-top-item" :class="classNum==2?'nav-top-item-active':''" @click="goScroll(2)">个人支出比例增长</a>
            <a class="nav-top-item" :class="classNum==3?'nav-top-item-active':''" @click="goScroll(3)">医保目录外费用</a>
            <a class="nav-top-item" :class="classNum==4?'nav-top-item-active':''" @click="goScroll(4)">就诊人次/人数占比</a>
            <a class="nav-top-item" :class="classNum==5?'nav-top-item-active':''" @click="goScroll(5)">住院人次/人头比</a>
            <a class="nav-top-item" :class="classNum==6?'nav-top-item-active':''" @click="goScroll(6)">住院人次/人头比</a>
            <a class="nav-top-item" :class="classNum==7?'nav-top-item-active':''" @click="goScroll(7)">医疗类别权重</a>
          </p>
        </div>
      </div>
    </div>
    <div class="chart-item" :style="{height:height+'px'}">
      <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
      <div class="item-box-left" :style="{width:width+ 'px'}">
        <Chart1 v-if="isShow" :isChange="isChange" :filter="filter"></Chart1>
      </div>
      <div class="item-box-right" :style="{width:width+ 'px'}">
        <Chart2 v-if="isShow" :isChange="isChange" :filter="filter"></Chart2>
      </div>
    </div>
    <div class="chart-item" v-if="num>0" :style="{height:height+'px'}">
      <div class="item-box-left" :style="{width:width+ 'px'}">
        <Chart3 v-if="isShow" :isChange="isChange"></Chart3>
      </div>
      <div class="item-box-right" :style="{width:width+ 'px'}">
        <Chart4 v-if="isShow" :isChange="isChange"></Chart4>
      </div>
    </div>
    <div class="chart-item" v-if="num>1" :style="{height:height+'px'}">
      <div class="item-box-left" :style="{width:width+ 'px'}">
        <Chart5 v-if="isShow" :isChange="isChange"></Chart5>
      </div>
      <div class="item-box-right" :style="{width:width+ 'px'}">
        <Chart6 v-if="isShow" :isChange="isChange"></Chart6>
      </div>
    </div>
    <div class="chart-item" v-if="num>2" :style="{height:height+'px'}">
      <div class="item-box-left" :style="{width:width+ 'px'}">
        <Chart7 v-if="isShow" :isChange="isChange"></Chart7>
      </div>
      <div class="item-box-right" :style="{width:width+ 'px'}">
        <Chart8 v-if="isShow" :isChange="isChange"></Chart8>
      </div>
    </div>
    <div class="chart-item" v-if="num>3" :style="{height:height+'px'}">
      <div class="item-box-left" :style="{width:width+ 'px'}">
        <hospital-in-people-num-analyse-charts v-if="isShow" :isChange="isChange"></hospital-in-people-num-analyse-charts>
      </div>
      <div class="item-box-right" :style="{width:width+ 'px'}">
        <hospital-in-people-num-analyse-right-charts v-if="isShow" :isChange="isChange"></hospital-in-people-num-analyse-right-charts>
      </div>
    </div>
    <div class="chart-item" v-if="num>4" :style="{height:height+'px'}">
      <div class="item-box-left" :style="{width:width+ 'px'}">
        <year-in-hos-people-times-peo-num-analyse-charts
          :isChange="isChange" v-if="isShow"></year-in-hos-people-times-peo-num-analyse-charts>
      </div>
      <div class="item-box-right" :style="{width:width+ 'px'}">
        <year-average-in-hos-day-analyse-charts v-if="isShow" :isChange="isChange"></year-average-in-hos-day-analyse-charts>
      </div>
    </div>
    <div class="chart-item" v-if="num>5" :style="{height:height+'px'}">
      <div class="item-box-left" :style="{width:width+ 'px'}">
        <medical-type-analyse-charts v-if="isShow" :isChange="isChange"></medical-type-analyse-charts>
      </div>
      <div class="item-box-right" :style="{width:width+ 'px'}">
        <cost-type-analyse-charts v-if="isShow" :isChange="isChange"></cost-type-analyse-charts>
      </div>
    </div>
    <div class="chart-item" v-if="num>6" :style="{height:height+'px'}">
      <div class="item-box-left" :style="{width:width+ 'px'}">
        <ten-disease-cost-charts v-if="isShow" :isChange="isChange"></ten-disease-cost-charts>
      </div>
      <div class="item-box-right" :style="{width:width+ 'px'}">
        <hundred-medical-cost-custom-charts v-if="isShow" :isChange="isChange"></hundred-medical-cost-custom-charts>
      </div>
    </div>
    <div style="height:10px;"></div>
  </div>
</template>

<script>
  import '../../assets/css/last-charts.css'
  import '../last/filter/topFilter.css'
  import Chart1 from './chart/chartItem1'
  import Chart2 from './chart/chartItem2'
  import Chart3 from './chart/chartItem3'
  import Chart4 from './chart/chartItem4'
  import Chart5 from './chart/chartItem5'
  import Chart6 from './chart/chartItem6'
  import Chart7 from './chart/chartItem7'
  import Chart8 from './chart/chartItem8'
  import YearAverageInHosDayAnalyseCharts from '../last/chart/year-average-in-hos-day-analyse-charts.vue'
  import CostTypeAnalyseCharts from  '../last/chart/cost-type-analyse-charts.vue'
  import MedicalTypeAnalyseCharts from '../last/chart/medical-type-analyse-charts.vue'
  import YearInHosPeopleTimesPeoNumAnalyseCharts from '../last/chart/year-in-hos-people-times-people-num-analyse.vue'
  import TenDiseaseCostCharts from '../last/chart/ten-type-single-disease-cost-charts.vue'
  import HundredMedicalCostCustomCharts from '../last/chart/hundred-medical-cost-custom-charts.vue'
  import HospitalInPeopleNumAnalyseCharts from '../last/chart/hospital-in-people-num-analyse.vue'
  import HospitalInPeopleNumAnalyseRightCharts from '../last/chart/hospital-in-people-num-analyse-right.vue'
  import {getSearchItems} from '../../api/api'
  import '../../assets/css/first-chart.css'
  export default {
    components: {
      Chart1,
      Chart2,
      Chart3,
      Chart4,
      Chart5,
      Chart6,
      Chart7,
      Chart8,
      YearAverageInHosDayAnalyseCharts,
      YearInHosPeopleTimesPeoNumAnalyseCharts,
      CostTypeAnalyseCharts,
      MedicalTypeAnalyseCharts,
      TenDiseaseCostCharts,
      HundredMedicalCostCustomCharts,
      HospitalInPeopleNumAnalyseCharts,
      HospitalInPeopleNumAnalyseRightCharts
    },
    name: 'index',
    props: ['isChange'],
    data () {
      return {
        filter: null,
        width: 0,
        left: 80,
        top: 70,
        height: 500,
        navWidth: 800,
        isShow:false,
        num:0,
        nextNum:0,
        classNum:0
      }
    },
    mounted(){
      this.getChartItem();
      setTimeout(()=>{
        this.isShow = true;//因为图表的高度是动态获取的，一开始并没有高度值，无高度值时不能渲染图表，故要等高度赋值后才渲染图表。
      },1)
      return;
      //获取筛选数据
      getSearchItems('init/initInput').then((res) => {
        if (res.code == 0) {
          this.filter = res.data;
        }
      });
    },
    watch: {
      isChange(){
        setTimeout(()=>{
          this.getChartItem();
        },100)
      },
      height(val){
        let  that = this;
        document.querySelector('.el-main').onscroll = function(e){
          e = e || windwo.event;
          let scrollTop = e.target.scrollTop;
          if(that.num<parseInt((scrollTop-5)/val)+1){
            that.num = parseInt(scrollTop/val)+1;
          }
          if(scrollTop==0){
            that.classNum = 0
          }else{
            that.classNum = parseInt((scrollTop-11)/val)+1
          }
        }
      },
      classNum(val,oldVal){
        if(val>oldVal){
          if(val-3==this.nextNum){
            this.goToNext();
          }
        }else{
          if(oldVal-2==this.nextNum){
            this.goToPrev();
          }
        }
      }
    },
    methods: {
      //点击面包屑效果
      goScroll(num){
        this.classNum = num;
        if(this.num<num){
          this.num = num;
        }
        let scrollTop = document.querySelector('.el-main').scrollTop;
        let goTop = this.height*num;
        let height = Math.abs(goTop-scrollTop);
        let spit = height/1000;
        let time = 0;
        let timer = setInterval(()=>{
          time+=100;
          if(time<=1000){
            if(scrollTop<goTop){
              document.querySelector('.el-main').scrollTop = scrollTop + spit*time;
            }else{
              document.querySelector('.el-main').scrollTop = scrollTop - spit*time;
            }
          }else{
            clearInterval(timer)
          }
        },100)
      },
      //动态设置宽高
      getChartItem(){
        let height = document.documentElement.clientHeight;
        let barHeight = 70;
        let sideWidth = 44;
        let bodyWidth = document.querySelector('body').clientWidth;
        let top = 70;
        if (document.querySelector('.el-header')) {
          barHeight = document.querySelector('.el-header').clientHeight;
          sideWidth = document.querySelector('.el-aside').clientWidth;
        } else {
          barHeight = 0;
          sideWidth = 0;
          top=0;
        }
        this.top = top;
        this.left = sideWidth;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight -54 ;
        //每一个图表块的宽度
        let width = document.querySelector('.chart-box').clientWidth;
        this.width = (width - 82) / 2;
        //nav-top left值
      },
      goToNext(){
        if(this.nextNum==4){
          return;
        }
        let oldLeft = this.nextNum*160;
        this.nextNum = this.nextNum+1;
        let spit = 10;
        let num = 0;
        let timer = setInterval(()=>{
          num++
          if(num<17){
            document.querySelector('.nav-top-item-container').style.left = 30 - oldLeft - spit*num+'px';
          }else{
            clearInterval(timer)
          }
        },10)
      },
      goToPrev(){
        if(this.nextNum==0){
          return;
        }
        let oldLeft = this.nextNum*160;
        this.nextNum = this.nextNum-1;
        let spit = 10;
        let num = 0;
        let timer = setInterval(()=>{
          num++
          if(num<17){
            document.querySelector('.nav-top-item-container').style.left = 30 - oldLeft + spit*num+'px';
          }else{
            clearInterval(timer)
          }
        },10)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
